<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<image class="image" :src="createByAvatar" mode=""></image>
			<view class="pre">
				<view class="title">
					{{ noticeTitle }}
				</view>
				<view class="vodeo">
					<u-parse :content="content"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '../../utils/mixin'
	import {
		noticeId
	} from '@/api/index.js'
	import config from '@/config/config.js'
	export default {
		components: {},
		mixins: [systemInfo],
		data() {
			return {
				content: '',
				noticeTitle: '',
				createByAvatar: ''
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.title
			})
			// 状态栏高度
			this.getSystemInfo();
			this.getDetail(options.id)
		},
		methods: {
			// 获取详情
			async getDetail(id) {
				const res = await noticeId(id)
				this.content = res.data.noticeContent
				this.noticeTitle = res.data.noticeTitle
				this.createByAvatar = res.data.createByAvatar ? (config.pic_prefix + res.data.createByAvatar) :
					'https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753766505656_ae368fe6/touxiang.png?x-oss-process=image/resize,w_300'

			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;

		.view {
			width: calc(100% - 60rpx);
			height: calc(100% - 60rpx);
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			top: 30rpx;
			margin: auto;
			overflow: auto;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-radius: 15px;

			.image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.pre {
				width: calc(100% - 100rpx);
				display: flex;
				flex-wrap: wrap;

				.vodeo {
					margin-top: 20rpx;
					width: 100%;

					image {
						width: 100%;
						height: 300rpx;
					}
				}
			}
		}
	}
</style>